<template>
<div class="hello">
    <h1>{{ msg }}</h1>

    <div class="div-flex-center">
        <div style="display: flex;justify-content: space-between;width: 600px;">
            <div class="game-btn btn-start" @click="switchTo(0)">开盘</div>
            <div class="game-btn btn-bet" @click="switchTo(1)">下注</div>
            <div class="game-btn btn-open" @click="switchTo(2)">开奖</div>
            <div class="game-btn btn-no" @click="switchTo(3)">局数</div>
        </div>
    </div>

    <div class="div-flex-center">
        <div id="start" class="form-state" v-show="step == 0">
            <a-form layout="horizontal">

                <a-form-item label="开盘结果：" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }">
                    <a-radio-group v-model="startTarget.result">
                        <a-radio value="大">
                            大
                        </a-radio>
                        <a-radio value="小">
                            小
                        </a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="开奖密码：" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
                    <a-input placeholder="input placeholder" v-model="startTarget.nonce" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 24 }">
                    <a-col :span="8" :off-set="2">
                        <a-button type="primary" @click="changeNonce">
                            更换密码
                        </a-button>
                    </a-col>
                    <a-col :span="12" :off-set="2">
                        <a-button type="primary" @click="okStart">
                            确认开盘
                        </a-button>
                    </a-col>
                </a-form-item>
            </a-form>
            <div v-show="startObj.startSuccess" style="font-size:20px;">
                <div>
                    <span>开盘成功！盘号：</span>
                    <span class="red-color" v-text="startObj.panNo"></span>
                    密码：
                    <span class="red-color" v-text="startObj.panNonce"></span>
                    结果：
                    <span class="red-color" v-text="startObj.panValue"></span>
                </div>
                <div style="color: red;font-weight:bold;">
                    <span>注意：请记住以上标红信息，否则无法开奖</span>
                </div>
            </div>
        </div>
        <div id="bet" class="form-state" v-show="step == 1">
            <a-form layout="horizontal">
                <a-form-item label="下注盘号：" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }">
                    <a-input-number v-model="bet.betNo" :min="0" />
                </a-form-item>
                <a-form-item label="下注结果：" :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }">
                    <a-radio-group v-model="bet.betValue">
                        <a-radio value="大">
                            大
                        </a-radio>
                        <a-radio value="小">
                            小
                        </a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 12 }">
                    <a-button type="primary" @click="okBet">
                        确认下注
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
        <div id="open" class="form-state" v-show="step == 2">
            <a-form layout="horizontal">
                <a-form-item label="开奖盘号：" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }">
                    <a-input-number v-model="open.no" :min="0" />
                </a-form-item>
                <a-form-item label="开奖结果：" :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }">
                    <a-radio-group v-model="open.value">
                        <a-radio value="大">
                            大
                        </a-radio>
                        <a-radio value="小">
                            小
                        </a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="开奖密码：" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
                    <a-input v-model="open.nonce" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 12 }">
                    <a-button type="primary" @click="okOpen">
                        确认开奖
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
        <div class="form-state" v-show="step == 3">
            <h1>当前盘数：{{lastNo}}</h1>
        </div>
    </div>
</div>
</template>

<script>
const web3Util = require("web3-utils");

export default {
    name: 'HelloWorld',
    data() {
        return {
            step: -1,
            startTarget: {
                result: '大',
                nonce: ''
            },
            startObj: {
                startSuccess: false,
                panNo: '',
                panNonce: '',
                panValue: ''
            },
            bet: {
                betNo: '',
                betValue: ''
            },
            open: {
                no: '',
                nonce: '',
                value: ''
            },
            lastNo: 0,
            msg: '欢迎来玩猜大小游戏',
            loading: null
        }
    },
    computed: {
        contract() {
            return this.$store.state.contract;
        },
        isWeb3() {
            return this.$store.state.web3;
        }
    },
    methods: {
        switchTo(step) {
            this.startObj.startSuccess = false;
            this.startObj.panNo = '';
            this.startObj.panNonce = '';
            this.startObj.panValue = '';
            this.step = step;
            this.changeNonce();
            if (step == 3) {
                this.getLastNo().then(no => {
                    this.lastNo = no;
                });
            }
        },
        getLastNo() {
            if (!this.checkIsWeb3())
                return;
            return this.contract.methods.getIndex().call({
                from: this.$store.state.account,
                gas: 5000000
            });
        },
        changeNonce() {
            this.startTarget.nonce = this.randomNonce();
        },
        randomNonce() {
            return Math.floor((Math.floor(Math.random() * (10000 - 1000)) + 1000));
        },
        checkIsWeb3() {
            console.log('.....', this.contract);
            if (!this.isWeb3) {
                this.$store.commit('initWeb3');
                return false;
            } else if (!this.contract) {
                this.$store.commit('initContract', this.isWeb3);
                return false;
            } else
                return true;
        },
        okStart() {
            if (!this.checkIsWeb3())
                return;

            var result = web3Util.soliditySha3(this.startTarget.result, this.startTarget.nonce);

            this.showLoading('开盘中，请稍后');

            this.contract.methods.startRound(result)
                .send({
                    from: this.$store.state.account,
                    gas: this.$store.state.gas
                })
                .then(resp => {
                    console.log('开盘结果：', resp);
                    this.hideLoading();
                    this.$message.success('开盘成功');
                    this.getLastNo().then(newNo => {
                        this.startObj.startSuccess = true;
                        this.startObj.panNonce = this.startTarget.nonce;
                        this.startObj.panValue = this.startTarget.result;
                        this.startObj.panNo = newNo;
                        this.lastNo = newNo;
                    });
                }).catch(err => {
                    this.hideLoading();
                    console.log('error has happend.', err);
                    this.$message.error('开盘失败');
                });
        },
        showLoading(msg) {
            this.loading = this.$message.loading(msg || '操作中，请稍后', 0);
        },
        hideLoading() {
            setTimeout(this.loading, 100);
        },
        okBet() {
            if (!this.checkIsWeb3())
                return;
            this.showLoading('下注中，请稍后');
            this.contract.methods.doBet(this.bet.betNo, this.bet.betValue)
                .send({
                    from: this.$store.state.account,
                    gas: this.$store.state.gas
                })
                .then(resp => {
                    console.log('下注结果：', resp);
                    this.hideLoading();
                    this.$message.success('下注成功');
                }).catch(err => {
                    this.hideLoading();
                    console.log('error has happend.', err);
                    this.$message.error('下注失败');
                });
        },
        okOpen() {
            if (!this.checkIsWeb3())
                return;
            this.showLoading('开奖中，请稍后');
            this.contract.methods.openResult(this.open.no, this.open.value, this.open.nonce)
                .send({
                    from: this.$store.state.account,
                    gas: this.$store.state.gas
                })
                .then(resp => {
                    console.log('开奖结果：', resp);
                    this.hideLoading();
                    this.$message.success('开奖成功');
                }).catch(err => {
                    this.hideLoading();
                    console.log('error has happend.', err);
                    this.$message.error('开奖失败');
                });
        }
    }
}
</script>

<style scoped>
.game-btn {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    font-size: 24px;
    color: white;
    margin: 0px 10px;
}

.btn-start {
    background-color: #4bb374;
    border-color: #4bb374;
}

.btn-bet {
    background-color: red;
    border-color: red;
}

.btn-open {
    background-color: #750ce8;
    border-color: #750ce8;
}

.btn-no {
    background-color: #70bdfd;
    border-color: #70bdfd;
}

.form-state {
    margin-top: 50px;
    width: 400px;
}

.div-flex-center {
    display: flex;
    justify-content: center;
}

.red-color {
    color: red;
}
</style>
